<template>
    <el-dialog title="详情" v-model="visible" width="70%" append-to-body class="order-detail">
        <el-tabs v-model="activeTab">
            <el-tab-pane label="订单详情" name="detail">
                <el-collapse v-model="activeCollapses">
                    <el-collapse-item title="商品信息" name="1">
                        <el-table :data="info.orderItemList" style="width: 100%">
                            <el-table-column prop="goodsCoverImg" label="商品主图">
                                <template #default="scope">
                                    <el-image style="width: 70px; height: 70px" :src="scope.row.goodsCoverImg" />
                                </template>
                            </el-table-column>
                            <el-table-column prop="goodsName" label="商品名称" />
                            <el-table-column prop="code" label="商品编码" />
                            <el-table-column prop="specs" label="商品规格" />
                            <el-table-column prop="unit" label="单位" />
                            <el-table-column prop="goodsCount" label="数量" />
                            <el-table-column prop="sellingPrice" label="单价" />
                            <el-table-column prop="allPrice" label="商品金额" />
                        </el-table>
                    </el-collapse-item>
                    <el-collapse-item title="订单信息" name="2">
                        <el-row :gutter="20">
                            <el-col :span="8" style="margin-top: 10px">退单单号：{{ info.backNo }}</el-col>
                            <el-col :span="8" style="margin-top: 10px">原订单号：{{ info.orderNo }}</el-col>
                            <el-col :span="8" style="margin-top: 10px">商户名称：{{ info.merchantName }}</el-col>
                            <el-col :span="8" style="margin-top: 10px">店铺名称：{{ info.merchantShopName }}</el-col>
                            <el-col :span="8" style="margin-top: 10px">买家名称：{{ info.buyUserName }}</el-col>
                            <el-col :span="8" style="margin-top: 10px">买家手机号：{{ info.buyUserPhone }}</el-col>
                            <el-col :span="8" style="margin-top: 10px">订单金额：{{ info.totalPrice }}</el-col>
                            <el-col :span="8" style="margin-top: 10px">运费金额：{{ info.freightPrice }}</el-col>
                            <el-col :span="8" style="margin-top: 10px">退款总金额：{{ info.backPrice }}</el-col>
                            <el-col :span="8" style="margin-top: 10px">退款类型：
                              <span v-if="info.backType === 1">仅退款</span>
                              <span v-if="info.backType === 2">退款退货</span>
                            </el-col>
                            <el-col :span="8" style="margin-top: 10px">售后类型：{{ info.backStatusStr }}</el-col>
                            <el-col :span="8" style="margin-top: 10px">退款原因：{{ info.backReasonName }}</el-col>
                            <el-col :span="8" style="margin-top: 10px">退款备注：{{ info.backRemark }}</el-col>
                        </el-row>
                    </el-collapse-item>


                </el-collapse>
            </el-tab-pane>

<!--            <el-tab-pane label="日志" name="log">-->
<!--                <el-table :data="info.orderProcessList" style="width: 100%">-->
<!--                    <el-table-column prop="orderNo" label="订单号" />-->
<!--                    <el-table-column prop="name" label="当前流程" />-->
<!--                    <el-table-column prop="createBy" label="操作人" />-->
<!--                    <el-table-column prop="createTime" label="操作时间" />-->
<!--                </el-table>-->
<!--            </el-tab-pane>-->


        </el-tabs>
    </el-dialog>
</template>

<script setup>
import { ref, reactive } from 'vue'
import {getBackOrder} from "@/api/business/backOrder";

const visible = ref(false)
const activeTab = ref('detail')
const activeCollapses = reactive(['1', '2', '3', '4'])
const info = reactive({})
const orderAddress = reactive({})
const logisticsItem = reactive({})
const tableData = reactive([])

const init = (id) => {
    visible.value = true
  getBackOrder(id).then(res => {
        Object.assign(info, res.data)
        // Object.assign(orderAddress, res.data.orderAddress)
        // Object.assign(logisticsItem, res.data.logisticsItem)
    })
}

defineExpose({
    init
});
</script>

<style lang="scss">
.order-detail {
    .el-dialog__body {
        padding-top: 0;

        .el-collapse {
            border-bottom: none;

            .el-collapse-item {
                margin-bottom: 10px;
                border: 1px solid #ebeef5;

                .el-collapse-item__header {
                    background: #f5f7fa;
                    padding: 0 10px;
                }

                .el-collapse-item__wrap {
                    padding: 10px;
                }

                .el-collapse-item__content {
                    padding-bottom: 0;
                }
            }

        }


    }
}
</style>